<template>
  <a-modal
    :visible="visibleOfAdd"
    title="添加工程项"
    cancelText="取消"
    okText="确认"
    @ok="confirm"
    @cancel="cancel"
    :bodyStyle="bodyStyle"
    :width="900"
  >
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :row-selection="{
        type: 'radio',
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        getCheckboxProps: getCheckboxProps,
      }"
      :pagination="false"
    ></a-table>
  </a-modal>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from "vue";
import { useStore } from "vuex";
import { cloneDeep } from "lodash";
import {
  getAddProject,
  saveProjectData,
} from "@/api/module/constructAndImplement";
import global from "../../../global/global.vue";

// 项目id
const projectId = global.xmid;

const props = defineProps({
  visibleOfAdd: Boolean,
  yearValue: String,
});

const store = useStore();

const emits = defineEmits(["closeOfAdd"]);

/* 表格规则 */
const columns = ref([
  // 工程
  {
    dataIndex: "gcmc",
    title: "工程",
    align: "center",
    customRender: ({ text, record, index }) => {
      const obj = {
        children: text,
        attrs: {},
      };
      // 判断条件
      // 判断数据总条数是不是大于两条
      if (dataSource.value.length >= 2) {
        // 整行数据只有bigSection
        if (record.bigSection) {
          obj.attrs.colSpan = 3;
          obj.children = record.bigSection;
          return obj;
        }
      }

      return obj;
    },
  },
  // 项目
  {
    dataIndex: "xmmc",
    title: "项目",
    align: "center",
    customRender: ({ text, record, index }) => {
      const obj = {
        children: text,
        attrs: {},
      };
      // 判断条件
      if (record.bigSection) {
        obj.attrs.colSpan = 0;
      }

      return obj;
    },
  },
  // 内容
  {
    dataIndex: "content",
    title: "内容",
    align: "center",
    customRender: ({ text, record, index }) => {
      const obj = {
        children: text,
        attrs: {},
      };
      // 判断条件
      if (record.bigSection) {
        obj.attrs.colSpan = 0;
      }

      return obj;
    },
  },
]);
/* 表格数据 */
const dataSource = ref([]);

const bodyStyle = {
  width: "900px",
  height: "600px",
  overflowY: "auto",
};

const selectedRowKeys = ref([]);

// 获取数据
const getAddProjectData = async () => {
  const res = await getAddProject({
    id: projectId,
    year: props.yearValue,
  });
  console.log(res.data);
  // 隐藏一些数据
  const reduceArr = res.data.filter((item) => {
    if (item.zbList) {
      return !item.zbList.includes(item.zbId);
    } else {
      return true;
    }
  });
  console.log(reduceArr);
  // 处理数据添加大标段
  const arrayWithBig = [];
  let previousSection = "";
  reduceArr.forEach((item, index) => {
    if (item.bdmc !== previousSection) {
      arrayWithBig.push({ bigSection: item.bdmc });
    }
    arrayWithBig.push(item);
    previousSection = item.bdmc;
  });
  dataSource.value = arrayWithBig;
  dataSource.value.forEach((item, index) => {
    item.key = index;
  });
};
getAddProjectData();

// 表格行选选择
const rows = ref([]);
const onSelectChange = (RowKeys, selectedRows) => {
  selectedRowKeys.value = RowKeys;
  rows.value = selectedRows;
};

// 设置不允许选择行
const getCheckboxProps = (record) => {
  return {
    disabled: record.bigSection,
  };
};

// 点击确认
const confirm = async () => {
  // 获取训中数据，发送请求
  console.log(rows.value);
  let paramsData = rows.value.map((item) => ({
    tzId: item.tzId,
    zbList: item.zbList + "," + item.zbId,
  }));
  paramsData = paramsData[0];
  const res = await saveProjectData(paramsData);
  console.log(res);
  emits("closeOfAdd", false);
};

// 点击取消
const cancel = () => {
  selectedRowKeys.value = [];
  emits("closeOfAdd", false);
};
</script>

<style lang="scss" scoped></style>
